<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>账户余额</title>
  <script src="./js/jquery.min.js" charset="utf-8"></script>
  <script src="./js/tool.js" charset="utf-8"></script>
  <script src="./js/rem.js" charset="utf-8"></script>
  <script src="./js/vue.min.js" charset="utf-8"></script>
  <script src="./js/echarts.simple.min.js" charset="utf-8"></script>
  <script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>
  <link rel="stylesheet" href="./css/normalize.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div id="app" class="container b_balance" v-cloak>
    <header>
      <p class="font-12 c_gray animated slideInleft">截至{{delineDate}}</p>
      <p class="font-14 c_3f">
        <i></i><span>话费余额</span>
      </p>
      <p class="c_org">{{balance_total}}元</p>
    </header>
    <div class="b_diliver"></div>
    <div class="b_article">
      <div>
        <ul>
          <li v-for="list of balance_details "><i></i><span class="font-14">{{list._name}}</span><span><i class="c_org">{{list._val}}</i><i class="c_org">{{list._unit}}</i></span></li>
        </ul>
      </div>
      <!-- <div>
        <ul>
          <li v-for="list of balance_details"><span>{{list._name}}</span><span><i class="c_org">{{list._val}}</i><i class="c_org">元</i></span></li>
        </ul>
      </div> -->
    </div>
    <script>
    var openId = "<%=openId%>";
      var app = new Vue({
        el: '#app',
        data: {
          // balance_url: './json/_balancepack.json',
          balance_url: 'http://wx.10010nm.com/WeiXinNM/queryInfoServlet?math='+Math.random(),
          balance_can_use: '',
          balance_total: '',
          balance_details: [],
          package_top: {},
          delineDate:'',
          balance_data:{
            typeStr:'queryFeeAmount',
            openId:openId
          }
        },
        mounted() {
          this.$nextTick(function() {
            // 页面初始化时调用的函数
            this.updateData();
          });
        },
        watch: {
          balance_total(val) {
            return val;
          },
          balance_can_use(val) {
            return val;
          },
          balance_details(val) {
            return val;
          }
        },
        methods: {
          updateData: function() {
            var context = this;

            function getBalance() {
              return axios.post(context.balance_url, { params:context.balance_data});
            }

            function getMore() {
              return axios.post(context.pack_url, context.pack_data);
            }
            // 并发请求
            axios.all([getBalance()]).then(axios.spread(function(res_person) {
              // 两个请求现在都执行完成

              // console.log(res_more);
              if (200 == res_person.status) {
                data = res_person.data;
                console.log(data);
                if ("0000" == data.status) {
                context.delineDate=data.dateStr.split('-');
                context.delineDate=context.delineDate[0]+"年"+context.delineDate[1]+"月"+context.delineDate[2]+'日';
                context.balance_details = [];
                context.balance_total = data.packageBalance.allNewBalance/100;
                  Boolean(data.packageBalance.realFee) ? context.balance_details.push({
                    _name: "实时话费",
                    _val: data.packageBalance.realFee/100,
                    _unit: '元'
                  }) : '';
                  Boolean(data.packageBalance.creditValue) ? context.balance_details.push({
                    _name: '信用额度',
                    _val: data.packageBalance.creditValue/100,
                    _unit: '元'
                  }) : '';
                  Boolean(data.packageBalance.openNum1) ? context.balance_details.push({
                    _name: '停机余额',
                    _val: data.packageBalance.openNum1/100,
                    _unit: '元'
                  }) : '';
                  console.log(context.balance_details);
                  console.log(context.balance_total);
                  // context.balance_details.push();
                  // context.balance_details = res_person.data.res.bill.detail;
                  // context.balance_total.forEach(function(val, index) {
                  //     if (val._name.indexOf('账户可用余额') > -1) {
                  //         context.balance_can_use = context.balance_total.splice(index, 1)[0];
                  //         return;
                  //     }
                  // })
                  // console.log(context.balance_can_use);
                  // console.log(context.balance_total);
                  // console.log(context.balance_details);
                } else if ('0100' == data.status) {
                  alert('获取信息失败');
                } else {
                  alert('未知错误');
                }

              }
              // if (200 == res_more.status) {
              //     context.package_changes = res_more.data.res;
              // }
            })).catch(function(err) {
              console.log(err);
            })
          },
        }
      })
    </script>
</body>

</html>
